Understanding Native Modules and Native Components in React Native

Course: React Native Training

Topic: Understanding Native Modules and Native Components

Course Link: React Native Training at JustAcademy

Demo Link: Register for a Course Demo

Additional Resource: JustAcademy Official Website

1. Introduction to Native Modules and Native Components

React Native allows developers to build Android and iOS applications using JavaScript or TypeScript and React. It also provides access to native platform functionality through components, APIs, and native integration mechanisms.

Sometimes, an application needs functionality that is not directly available through React Native's built-in APIs or an existing community library. In such situations, developers can write platform-specific code using technologies such as Kotlin or Java for Android and Swift or Objective-C for iOS.

Two important concepts in this area are Native Modules and Native Components. Native Modules expose native functionality, while Native Components expose native user-interface elements that can be rendered and controlled through React components.

For official technical guidance, refer to the React Native Native Platform documentation.

1.1 What Is a Native Module?

A Native Module is a mechanism for exposing native platform functionality to JavaScript or TypeScript. It is typically used when an application needs to call native code that performs an operation rather than render a visual interface.

Examples include:

• Accessing a specialized Android or iOS SDK.
• Reading platform-specific device information.
• Integrating certain notification or payment services.
• Calling native methods for file operations or hardware access.
• Using existing native libraries that are not available through a suitable React Native package.
• Performing platform-specific processing that is difficult to implement appropriately in JavaScript.

1.2 What Is a Native Component?

A Native Component is a user-interface component backed by a native view or widget on the target platform. React Native's built-in components, such as View, Text, and TextInput, provide familiar React APIs while using native platform implementations.

Custom Native Components are useful when an application needs a native UI element that is not adequately provided by React Native or an existing library.

Examples include:

• A specialized camera preview.
• A custom map view.
• A platform-specific video player.
• A native chart or visualization view.
• A custom hardware interface with native UI behavior.
• A specialized control supplied by a third-party native SDK.

2. Learning Objectives

After completing this topic, learners should be able to:

• Explain the purpose of Native Modules and Native Components.
• Differentiate functionality-oriented native modules from UI-oriented native components.
• Understand how JavaScript communicates with native code.
• Identify when native integration is necessary.
• Understand the role of Kotlin and Java in Android native development.
• Understand the role of Swift and Objective-C in iOS native development.
• Recognize the difference between legacy native APIs and the New Architecture.
• Plan, test, and troubleshoot native integrations in a React Native application.

3. Why Does React Native Need Native Integration?

React Native provides many commonly used components and APIs. However, mobile platforms offer a large number of specialized services and libraries that may not have a direct JavaScript interface.

3.1 Common Reasons for Native Integration

3.2 Example Scenario

Imagine that a business application needs to communicate with a specialized Android device scanner. The scanner manufacturer provides an Android SDK but no React Native package.

A developer could create a Native Module that calls the scanner SDK and returns the result to JavaScript. If the scanner SDK also provides a visual preview or interactive controls, a Native Component might be appropriate for the interface.

This approach allows the React Native application to reuse platform-specific capabilities while keeping most of its application logic in JavaScript or TypeScript.

4. Native Modules vs. Native Components

4.1 Easy Way to Remember the Difference

• Native Module: Use native code to perform an operation.
• Native Component: Use native code to display or control a UI element.

A single feature can use both. For example, a camera feature might use a Native Component for the camera preview and a Native Module for an operation that captures metadata or interacts with a separate device service.

5. Understanding the React Native Architecture

A React Native application combines JavaScript or TypeScript code with native platform code. The exact communication mechanism depends on the React Native version and architecture.

5.1 Main Parts of the Application

• JavaScript or TypeScript layer: Contains React components, application logic, and calls to exposed APIs.
• React Native runtime: Coordinates JavaScript execution and the React Native rendering and native integration systems.
• Native platform layer: Contains Android or iOS APIs, native libraries, and platform-specific implementation code.
• Native UI layer: Creates and manages platform views for native-backed components.

5.2 Simplified Communication Flow

React Native Application
          |
          v
JavaScript / TypeScript
          |
          v
React Native Native Integration
          |
          v
Android or iOS Native Code
          |
          v
Platform API, SDK, or Native View
          |
          v
Result or Event Returned to React Native

This diagram illustrates the overall idea rather than a specific internal implementation. The New Architecture uses mechanisms such as JSI, TurboModules, and Fabric, so communication details differ from the legacy bridge architecture.

6. Understanding Native Modules in Detail

A Native Module exposes methods, constants, or events from platform code so that a React Native application can use them. It is particularly helpful when a feature needs to interact with an operating-system API or native library.

6.1 Main Responsibilities of a Native Module

• Receive parameters from JavaScript.
• Validate input values.
• Execute the relevant native operation.
• Handle native errors and exceptional conditions.
• Return results or report events to JavaScript.
• Respect platform permissions and lifecycle requirements.

6.2 Examples of Native Module Functionality

These names are illustrative examples. A project should use established libraries when they already provide the required functionality safely and reliably.

7. Legacy Native Modules and TurboModules

React Native has evolved from its legacy bridge-based native integration system toward the New Architecture. When learning native development, it is important to distinguish older examples from modern integration approaches.

7.1 Legacy Native Modules

Legacy Native Modules commonly use native module classes and bridge APIs to expose methods to JavaScript. Android examples may use Kotlin or Java classes based on React Native bridge types and annotations.

Legacy documentation remains useful for maintaining older applications and understanding existing code, but developers should check whether the APIs match the React Native version and architecture used by their project.

7.2 TurboModules

TurboModules are part of React Native's New Architecture. They use a more modern native module system with support for typed specifications and code generation.

Potential benefits include:

• More structured interfaces between JavaScript and native code.
• Improved type integration through generated native interfaces.
• Modernized module initialization and integration mechanisms.
• Closer alignment with the New Architecture's native runtime.

7.3 Choosing the Correct Approach

• Check the React Native version used by the project.
• Check whether the project uses the New Architecture.
• Prefer maintained libraries with support for the project's architecture.
• Follow the current official documentation for new native integrations.
• Use legacy APIs when maintaining compatible existing code, and plan migrations when appropriate.

Official resources: Native Platform and Turbo Native Modules Introduction.

8. Introduction to Native Components

A Native Component exposes a platform-specific UI element to React Native as a React component. It allows JavaScript code to configure a native view through properties and respond to events generated by the native implementation.

8.1 Responsibilities of a Native Component

• Display a native UI element.
• Accept configuration through component props.
• Update native properties when React props change.
• Report native interactions through events.
• Manage native view creation and lifecycle appropriately.
• Support layout and accessibility requirements.

8.2 Examples of Native Components

• A custom camera preview.
• A native map or navigation view.
• A specialized media player.
• A custom chart implemented using a native graphics library.
• A platform-specific device-control panel.

8.3 Built-In React Native Components

React Native already provides several components backed by native platform UI elements. Developers should check these built-in options before implementing a custom component.

Reference: React Native Core Components and APIs.

9. Understanding Props and Events in Native Components

Props allow a React component to pass configuration values to its native implementation. Events allow the native implementation to notify JavaScript when an interaction or operation occurs.

9.1 Props

Props can represent values such as:

• Whether a feature is enabled.
• The title or label displayed by a control.
• The selected item or current value.
• The configuration of a native view.
• Options that affect native behavior.

9.2 Events

Events can communicate information such as:

• A user selected an item.
• A native operation completed.
• A media player reached a particular state.
• A device feature reported a status change.
• A native operation failed and produced an error.

9.3 Example React Component Interface

// Illustrative interface for a custom native component.
// The native implementation and platform view manager
// must be created separately.

import React from 'react';
import { View, Text } from 'react-native';

type ScannerStatusProps = {
  status: string;
};

export function ScannerStatus({ status }: ScannerStatusProps) {
  return (
    <View>
      <Text>Scanner status: {status}</Text>
    </View>
  );
}

This is a regular React Native wrapper around a status value, not a complete custom Native Component implementation. A true custom Native Component requires a native UI implementation and the appropriate platform integration layer.

10. Android Native Development for React Native

Android native integration commonly uses Kotlin or Java. A React Native project's Android folder contains the application configuration, Gradle build scripts, manifest, and native source files.

10.1 Typical Android Project Locations

MyReactNativeApp/
├── android/
│   ├── app/
│   │   ├── src/main/
│   │   │   ├── AndroidManifest.xml
│   │   │   └── java/ or kotlin/
│   │   └── build.gradle
│   ├── build.gradle
│   └── settings.gradle
├── App.tsx
├── package.json
└── node_modules/

This is a simplified illustration. File names and structure can differ depending on the React Native version and project setup.

10.2 Kotlin and Java Responsibilities

• Implement platform-specific methods.
• Integrate Android SDKs and native libraries.
• Configure native views and expose component behavior.
• Handle permissions and platform lifecycle requirements.
• Translate native results and errors into a form JavaScript can use.

11. Creating a Simple Android Native Module: Conceptual Example

Consider a requirement to expose a native method that returns a simple greeting. This demonstrates the basic idea of a Native Module without requiring access to sensitive device information.

Important: The following example uses the legacy Android Native Module API for educational purposes. It is not a universal implementation for every React Native version. New projects should check the current TurboModule documentation and their project's architecture before choosing an API.

11.1 Kotlin Module Example

package com.example.myapp

import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod

class GreetingModule(
    reactContext: ReactApplicationContext
) : ReactContextBaseJavaModule(reactContext) {

    override fun getName(): String = "GreetingModule"

    @ReactMethod
    fun getGreeting(name: String) {
        val message = "Hello, $name!"
        android.util.Log.d("GreetingModule", message)
    }
}

This simplified legacy example exposes a method and writes its result to Android Logcat. It does not return the greeting to JavaScript. A production module that needs to return a value should use an appropriate supported asynchronous result pattern, such as a Promise, or a modern typed module interface.

11.2 Java Module Example

package com.example.myapp;

import android.util.Log;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class GreetingModule extends ReactContextBaseJavaModule {
    public GreetingModule(ReactApplicationContext context) {
        super(context);
    }

    @Override
    public String getName() {
        return "GreetingModule";
    }

    @ReactMethod
    public void getGreeting(String name) {
        String message = "Hello, " + name + "!";
        Log.d("GreetingModule", message);
    }
}

This Java example has the same educational purpose. A real module must also be registered using the appropriate mechanism for the project's React Native architecture.

11.3 Calling a Legacy Module from JavaScript

import { NativeModules, Button } from 'react-native';

const { GreetingModule } = NativeModules;

export default function GreetingButton() {
  return (
    <Button
      title="Write greeting to native log"
      onPress={() => GreetingModule.getGreeting('Alex')}
    />
  );
}

The module must exist and be registered before this call can work. After adding or changing native Android code, rebuild the application. JavaScript refresh alone does not compile new native source code.

12. Returning Results from Native Modules

Native modules often need to return a value or signal that an operation has completed. The method of communicating the result depends on the API being used and the type of operation.

12.1 Common Result Patterns

12.2 Promise-Based JavaScript Usage

async function loadNativeValue() {
  try {
    const value = await NativeModule.getValue();
    console.log('Native value:', value);
  } catch (error) {
    console.error('Native operation failed:', error);
  }
}

This is a conceptual example. The native module must implement and expose a compatible asynchronous method named getValue. Error handling should be adapted to the project's actual interface.

13. Building a Custom Native Component

Creating a custom Native Component generally requires a platform-specific view and a React Native integration layer that exposes its properties and events. The exact steps differ between legacy component APIs and Fabric, the New Architecture's renderer.

13.1 High-Level Implementation Steps

1. Define the component's purpose and expected behavior.
2. Check whether a built-in React Native component or maintained community package already solves the problem.
3. Create the native view for Android or iOS.
4. Define the properties that JavaScript can pass to the view.
5. Define events that the native view needs to send back to JavaScript.
6. Implement the required view manager or modern component integration.
7. Expose a typed React component interface where appropriate.
8. Build the native application and test the component on the target platform.

13.2 Native Component Design Considerations

• Support expected width, height, and layout behavior.
• Handle updates when props change.
• Provide clear events for user interactions and native operation results.
• Support accessibility labels and interaction semantics.
• Release native resources when the component is no longer needed.
• Handle errors and platform-specific differences gracefully.
• Test on multiple devices and supported operating-system versions.

14. Native Module and Component Lifecycle

Native integration must account for both React Native and the underlying platform lifecycle. Poor lifecycle handling can cause memory leaks, duplicate event subscriptions, stale state, or operations that continue after a screen is no longer relevant.

14.1 Native Module Lifecycle Considerations

• Initialize native resources only when required.
• Release resources and listeners when appropriate.
• Handle activity availability and application lifecycle changes correctly.
• Avoid assuming that an activity is always attached or available.
• Handle cancellation and errors from asynchronous operations.

14.2 Native Component Lifecycle Considerations

• Create and configure the native view correctly.
• Update the view when React props change.
• Remove listeners when the view is detached or disposed of.
• Release resources such as camera or media handles when appropriate.
• Prevent duplicate event delivery after repeated mounting or updates.

15. Error Handling and Threading

Native modules and components should handle errors predictably. Native exceptions should not be allowed to crash the application unnecessarily, and asynchronous operations should communicate failures clearly to JavaScript.

15.1 Common Errors

• Invalid method arguments.
• Missing permissions.
• Unavailable native SDKs or services.
• Incorrect module or component registration.
• Native build configuration errors.
• Operations called when the relevant activity or view is unavailable.
• Threading mistakes that block the UI or access native resources incorrectly.

15.2 Error Handling Best Practices

• Validate arguments before invoking native operations.
• Return descriptive errors that JavaScript can handle.
• Do not expose sensitive internal data in error messages.
• Use suitable threads or asynchronous APIs for long-running work.
• Respect platform-specific thread requirements for UI updates.
• Log enough information to diagnose errors without logging secrets.

16. Performance Considerations

Native integration can enable access to platform capabilities, but a poorly designed module or component can still cause performance problems.

16.1 Performance Best Practices

• Avoid unnecessary native calls during frequent UI renders.
• Batch related operations when the API design allows it.
• Avoid blocking synchronous native methods for lengthy work.
• Use asynchronous results and events when appropriate.
• Minimize unnecessary data conversion and large payload transfers.
• Keep component updates efficient.
• Profile real devices rather than relying exclusively on development-mode performance.
• Measure before optimizing and verify that changes improve the actual bottleneck.

17. Security Considerations

Native modules may access sensitive platform features or data. They should enforce appropriate validation, permissions, and access controls instead of assuming that all JavaScript calls are valid.

• Validate all input received from JavaScript.
• Follow Android and iOS permission requirements.
• Keep secrets out of source code and logs.
• Use secure storage mechanisms when appropriate.
• Protect sensitive operations with the necessary authorization checks.
• Avoid exposing unrestricted native functionality to the JavaScript layer.
• Keep native SDKs and dependencies updated.
• Review third-party packages for maintenance, compatibility, and security.

18. Testing Native Modules and Components

Native integrations should be tested at multiple levels because JavaScript-only tests cannot fully validate native implementation behavior.

18.1 Testing Strategies

18.2 Testing Checklist

• Does the module or component register correctly?
• Are valid parameters accepted?
• Are invalid parameters handled safely?
• Are results and errors communicated correctly?
• Do native events arrive as expected?
• Are permissions handled properly?
• Are resources released when the feature is no longer used?
• Does the implementation work on all intended platforms?

19. Troubleshooting Native Integration

20. Practical Project: Native Feature Integration

Build a small React Native application that uses a native feature through a Native Module or a Native Component. Begin with a harmless feature such as exposing a simple native status or displaying a platform-provided view.

20.1 Project Requirements

• Create or use an existing React Native project.
• Identify a feature that requires native integration.
• Determine whether the feature needs a Native Module, a Native Component, or both.
• Implement the native functionality using the supported API for the project architecture.
• Expose the functionality to JavaScript or TypeScript.
• Handle errors and lifecycle events.
• Build and test the application on the target platform.

20.2 Suggested Project Workflow

1. Write down the feature requirements.
2. Check React Native built-in APIs and maintained community libraries.
3. Review the official native integration documentation for the project's version.
4. Implement the smallest working native interface.
5. Connect the native implementation to JavaScript or TypeScript.
6. Rebuild the native application.
7. Test normal behavior, error handling, and lifecycle changes.
8. Document setup instructions and any platform-specific limitations.

21. Best Practices for Native Integration

• Use built-in React Native components and APIs whenever they meet the requirements.
• Prefer a maintained community package when it is reliable and compatible.
• Create custom native modules only when a clear requirement justifies them.
• Use Native Components when native UI rendering or platform-specific view behavior is required.
• Keep the JavaScript-facing interface small, predictable, and well documented.
• Use TypeScript types to make the JavaScript interface easier to use safely.
• Follow the current React Native architecture and documentation.
• Keep platform-specific implementations separate where necessary.
• Handle errors, permissions, threading, and resource cleanup carefully.
• Test the native integration on physical devices and emulators.
• Rebuild the application after changing native code.
• Review dependency maintenance and security before integrating third-party SDKs.

22. Interview Questions and Answers

Q1. What is a Native Module in React Native?

Answer: A Native Module exposes native platform functionality to JavaScript or TypeScript through a supported module interface.

Q2. What is a Native Component?

Answer: A Native Component exposes a native user-interface element as a React component so that JavaScript can render and configure it.

Q3. What is the main difference between Native Modules and Native Components?

Answer: Native Modules primarily expose operations and functionality, while Native Components primarily expose native UI elements.

Q4. When should a developer create a Native Module?

Answer: When a required platform API or native SDK is not adequately exposed by React Native or a suitable maintained library.

Q5. When should a developer create a Native Component?

Answer: When an application requires a native view or UI behavior that built-in components and existing libraries do not adequately provide.

Q6. Which languages are commonly used for Android native integration?

Answer: Kotlin and Java are commonly used for Android native modules and components.

Q7. Which languages are commonly used for iOS native integration?

Answer: Swift and Objective-C are commonly used for iOS native code.

Q8. What is a TurboModule?

Answer: A TurboModule is part of React Native's New Architecture and provides a modern approach to exposing native functionality, including typed specifications and code generation.

Q9. What is Fabric?

Answer: Fabric is React Native's New Architecture renderer, which supports the integration and rendering of native UI components.

Q10. Why must an application be rebuilt after native code changes?

Answer: Native code is compiled into the platform application. JavaScript refresh does not compile newly added Kotlin, Java, Swift, or Objective-C source files.

Q11. What is the role of props in a Native Component?

Answer: Props pass configuration and data from the React component to its native view.

Q12. How can native code communicate an asynchronous result to JavaScript?

Answer: Depending on the API, it can use promises, callbacks, events, or the appropriate modern typed interface.

Q13. Why is lifecycle management important?

Answer: It helps prevent memory leaks, duplicate events, stale state, and operations that continue after a component or screen is no longer needed.

Q14. How should native integration errors be investigated?

Answer: Check the JavaScript error, native logs, registration, dependency compatibility, permissions, and build output. Reproduce the issue and isolate the cause.

Q15. What should be considered before adding a third-party native package?

Answer: Check maintenance, security, platform coverage, React Native version compatibility, New Architecture support, and the quality of its documentation.

23. Practice Exercises

1. Explain the difference between a Native Module and a Native Component in your own words.
2. List five examples of functionality that might require native integration.
3. Identify three native UI elements that could be exposed as custom React components.
4. Explore the Android folder of a React Native project.
5. Read the official documentation for Android Native Modules.
6. Sketch the communication flow between JavaScript and native code.
7. Design a typed JavaScript interface for a fictional native device scanner.
8. Write a test plan for a native module that can succeed or fail.
9. Explain why lifecycle cleanup and permission handling matter.
10. Compare a legacy Native Module with the TurboModule approach at a conceptual level.

24. Quick Revision Checklist

• Understand the purpose of Native Modules.
• Understand the purpose of Native Components.
• Know the difference between operations and native UI rendering.
• Recognize when native integration is necessary.
• Understand how JavaScript communicates with native platform code.
• Know the role of Kotlin and Java on Android.
• Know the role of Swift and Objective-C on iOS.
• Understand props, events, results, and error handling.
• Recognize legacy APIs, TurboModules, and Fabric.
• Understand native lifecycle and resource cleanup.
• Know why native code changes require a rebuild.
• Test native integrations on the intended platforms.

25. Conclusion

Native Modules and Native Components allow React Native applications to integrate with platform-specific functionality and user-interface elements. A Native Module exposes operations and data, while a Native Component exposes a native view that can be rendered through React.

Before writing custom native code, check whether React Native's built-in APIs or an established community package already meet the requirement. When native integration is necessary, choose an API compatible with the project's React Native version and architecture, design a clear interface, handle errors and lifecycle changes, and test thoroughly on the intended platforms.

Course Resource: Learn more through React Native Training at JustAcademy, register for the Course Demo, or explore the JustAcademy Official Website.

Official Technical References:

• React Native Native Platform
• React Native Core Components and APIs
• Turbo Native Modules Introduction
• Fabric Native Components Introduction